<template>
  <view v-if="swiperList.length > 0" class="member-activity-wrap">
    <view class="title">{{ moduleTitle || '会员活动' }}</view>
    <view class="swiper-wrap">
      <u-swiper
        circular
        indicator
        radius="8"
        height="194"
        duration="1000"
        interval="5000"
        next-margin="50"
        :list="swiperList"
        indicator-mode="dot"
        indicator-active-color="#78ffe6"
        @click="onSwiperClick"
      />
    </view>
  </view>
  <view v-else />
</template>

<script>
import {
  getImg,
  execFn,
  getCurrentPageConfigByName
} from '../../../utils/index'
export default {
  name: 'MemberActivitySwiper',
  // #ifdef MP-WEIXIN
  options: {
    styleIsolation: 'shared'
  },
  // #endif
  data() {
    return {
      moduleTitle: '',
      swiperList: [],
      oldList: []
    }
  },

  mounted() {
    this.initPage()
  },

  methods: {
    initPage() {
      const _this = this
      getCurrentPageConfigByName('会员活动').then(res => {
        console.log('会员活动---模块配置数据')
        console.log(res)
        const {
          title,
          app_path_set_dt
        } = res
        _this.moduleTitle = title
        _this.oldList = app_path_set_dt
        _this.swiperList = app_path_set_dt.map(e => {
          return getImg(e.image)
        })
      })
    },

    onSwiperClick(index) {
      const url = this.oldList[index].url
      url && execFn(url)
    }
  }
}
</script>

<style lang="scss" scoped>
	.member-activity-wrap {
		padding-left: 20rpx;
		margin-bottom: 20rpx;

		.title {
			font-size: 32rpx;
			font-weight: bolder;
			padding: 0 0 20rpx 25rpx;
		}
	}

	::v-deep.u-swiper__wrapper__item {
		box-sizing: border-box;
		padding-right: 30rpx;
	}
</style>
